<template>
  <div class="discovery">
        <div class="banner">
              <img src="../assets/banner.png"/>
        </div>
        <div class="wrap">
             <ul class="menu">
                 <li :class="{'active':active_tab==1}" @click="show(1);">数学老师</li>
                 <li :class="{'active':active_tab==2}" @click="show(2);">英语老师</li>
                 <li :class="{'active':active_tab==3}" @click="show(3);">物理老师</li>
             </ul>
             <ul class="items">
                  <router-link  v-for="teacher in renderArr" tag="li" :to="{name:'teacherInfo',params:{id:teacher.id}}">
                       <div class="thum">
                             <img :src="teacher.headImg"/>
                       </div>
                       <div class="info">
                             <b>{{teacher.chname}}</b>
                             <p>{{teacher.desc}}</p>
                       </div>
                  </router-link>
             </ul>
        </div>
        <public-footer></public-footer>
  </div>
</template>

<script>
import publicFooter from './footer'
export default {
  data () {
    return {
      active_tab: 1,
      renderArr:[],
      mathArr:[],
      EnglishArr:[],
      physicArr:[]
    }
  },
  components:{
      publicFooter
  },
  mounted:function(){
      this.getData();
  },
  methods:{
    show(type){
        this.active_tab=type;
        if(type==1){
          this.renderArr=this.mathArr;
        }else if(type==2){
          this.renderArr=this.EnglishArr;
        }else if(type==3){
          this.renderArr=this.physicArr;
        }
    },
    getData(){
      var _this=this;
      _this.$http.post("/api/comnControl.do?getCanxinTeacherRecomandInfo",
                  {
                    "body": "object",
                    "page": 1,
                    "rows": 10
                  })
      .then(
        (response)=>{
          console.log(response);
          response.body.rows.forEach(function(v,i){
            if(v.subjectType=="数学"){
               _this.mathArr.push(v);
               _this.renderArr=_this.mathArr;
            }else if(v.subjectType=="英语"){
               _this.EnglishArr.push(v);
            }else if(v.subjectType=="物理"){
               _this.physicArr.push(v);
            }
          });
        },
        (error)=>{
          _this.finish=true;
          console.log(error);
        }
      );
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.discovery
{
    .banner
    {
        padding-bottom:0.2rem solid #f5f5f5;
        img
        {
            width:100%;
        }
    }
    .wrap
    {
        background:#fff;
        .menu
        {
            display:flex;
            border-bottom:1px solid #eee;
            li
            {
                flex:1;
                text-align:center;
                line-height:0.8rem;
                height:0.8rem;
                &.active
                {
                    position:relative;
                    &::after
                    {
                        content:'';
                        width:100%;
                        height:0.04rem;
                        background:#078def;
                        left:0;
                        bottom:0;
                        position: absolute;
                    }
                }
            }
        }
        .items
        {
            padding:0 0.3rem;
            li
            {
                padding:0.3rem 0;
                display:flex;
                border-bottom:1px solid #eee;
                &:last-child
                {
                    border-bottom:none;
                }
                .thum
                {
                    flex:0 0 1.1rem;
                    height:1.1rem;
                    img
                    {
                        width:100%;
                        height:100%;
                    }
                }
                .info
                {
                    flex:1;
                    padding-left:0.2rem;
                    display: flex;
                    flex-flow: row wrap;
                    align-content: space-between;
                    b
                    {
                        font-size:0.3rem;
                        display:block;
                        width:100%;
                    }
                    p
                    {
                        line-height:1.2;
                    }
                }
            }
        }
    }
}
</style>
